<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图表</title>
    <script src="../layui/layui.js"></script>
    <script src="../src/static/jquery.js"></script>
    <script src="../src/static/echarts.js"></script>
    <link rel="stylesheet" href="../layui/css/layui.css">
    <link rel="stylesheet" href="tubiao.css">
</head>
<body>
<div class="dingbu">
    <button class="layui-btn layui-btn-radius layui-btn-warm anniu" onclick="fanhui()">
        <!--<a href="javascript :;" onClick="javascript :history.go(-1);"></a>-->
        返回主页
    </button>
    <div class="dingbu_dashuju">总数据</div>
</div>
<script>
    function fanhui() {
        //这是返回上一页
        window.history.back(-1);
    }
    $.ajax({
        url: '/api/getUserRole',
        type: 'get',
        datatype: 'json',
        success: function (data) {
           if(data.code == 2){
               location.href='/';
           }
        }
    })
</script>
<div class="layui-container jianju">
    <!--常规布局（以中型屏幕桌面为例）：-->
    <div class="layui-row ">
        <div class="layui-col-md5 layui-col-md-offset2">
            <div class="all_jc_num">
                <div class="all_jc_num_one">所有机器当前累计检测数</div>
                <div class="all_jc_num_two"><label id="span1">0</label></div>
            </div>
        </div>
        <div class="layui-col-md4">
            <div class="all_jc_num">
                <div class="all_jc_num_one">所有机器当前累计付款数</div>
                <div class="all_jc_num_two"><label id="span2">0</label></div>
            </div>
        </div>
    </div>
</div>
<div class="layui-container jianju">
    <!--常规布局（以中型屏幕桌面为例）：-->
    <div class="layui-row ">
        <div class="layui-col-md5 layui-col-md-offset2">
            <div class="all_jc_num">
                <div class="all_jc_num_one">所有机器今天检测数</div>
                <div class="all_jc_num_two"><label id="span3">0</label></div>
            </div>
        </div>
        <div class="layui-col-md4">
            <div class="all_jc_num">
                <div class="all_jc_num_one">所有机器今天付款数</div>
                <div class="all_jc_num_two"><label id="span4">0</label></div>
            </div>
        </div>
    </div>
</div>
<script>
    //    发起ajax请求
    $.ajax(
        {
            url: '/api/getInformation',
            data: '',
            type: 'get',
            datatype: 'json',
            success: function (data) {
                var num1 = -1;
                var a = setInterval(function () {
                    num1++;
                    var span1 = document.getElementById("span1");
                    span1.innerText = num1;
                    if (num1 == data.sqNumber) {
                        clearInterval(a);
                    }
                }, 10);
                var num2 = -1;
                var b = setInterval(function () {
                    num2++;
                    var span1 = document.getElementById("span2");
                    span1.innerText = num2;
                    if (num2 == data.sqPayNumber) {
                        clearInterval(b);
                    }
                }, 10);
                var num3 = -1;
                var c = setInterval(function () {
                    num3++;
                    var span1 = document.getElementById("span3");
                    span1.innerText = num3;
                    if (num1 == data.sqDayNumber) {
                        clearInterval(c);
                    }
                }, 10);
                var num4 = -1;
                var d = setInterval(function () {
                    num4++;
                    var span1 = document.getElementById("span4");
                    span1.innerText = num4;
                    if (num4 == data.sqTPayNumber) {
                        clearInterval(d);
                    }
                }, 10);
            }
        }
    );
</script>

<div id="main" class="tjt"></div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    var option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        legend: {
            data: ['所有机器月检测数', '所有机器月付款数'],
        },
        grid: {
            left: '10%',
            right: '10%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                data: []
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: '所有机器月检测数',
                type: 'bar',
                barWidth: '30',
                color: '#1E90FF',
                data: []
            },
            {
                name: '所有机器月付款数',
                type: 'bar',
                barWidth: '30',
//                color:'#90EE90',
                data: []
            },

        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    $.ajax({
        url: '/api/getInformationEcharts',
        type: 'get',
        datatype: 'json',
        success: function (data) {
            myChart.setOption({
                xAxis: {data: data.date},
                series: [
                    {name: '所有机器月检测数', data: data.listPaid},
                    {name: '所有机器月付款数', data: data.listPay}
                ]
            });
        }
    })
</script>

<!--分割层-->
<div class="tubiaofengeceng">各机器详细数据</div>
<!--最外部数据表格容器-->
<table id="demo" lay-filter="test" style="margin-top: 5%"></table>

<script>
    layui.use('table', function () {
        var table = layui.table;
        //第一个实例
        table.render({
            elem: '#demo'
            , height: 500
            , url: '/api/getInformationList' //数据接口
            , page: true //开启分页
            , limits: '[10,20,30,40]'
            , loading: 'true'
            , cols: [[ //表头
                {
                    field: 'sbno', title: '机器号', width: 130, sort: true, fixed: 'left', templet: function (d) {
                        return "<a href='/chart/jiansuo.html?_ijt=" + d.sbno + "' target='_blank' class=\"layui-table-link\">" + d.sbno + "</a>";
                    }
                }
                , {field: 'num', title: '月检测数', width: 110, sort: true}
                , {field: 'pnum', title: '月付款数', width: 110, sort: true}
                , {field: 'mct', title: '月检测同比(%)', width: 130, sort: true}
                , {field: 'mpt', title: '月付款同比(%)', width: 130, sort: true}
                , {field: 'mch', title: '月检测环比(%)', width: 130, sort: true}
                , {field: 'mph', title: '月付款环比(%)', width: 130, sort: true}
                , {field: 'yct', title: '年累计检测同比(%)', width: 160, sort: true}
                , {field: 'ypt', title: '年累计付款同比(%)', width: 160, sort: true}
                , {field: 'title', title: '未付款', width: '110', templet: '#titleTpl'}

                , {field: 'addressname', title: '存放点位', width: ''}
            ]],

        });
    });
</script>
<script type="text/html" id="titleTpl">
    <a href="/chart/weifukuan.html?_ijt={{d.sbno}}" target="_blank" class="layui-table-link">查看</a>
</script>
<!--<script type="text/html" id="titleTpll">-->
<!--<a href="?_ijt={{d.sbno}}" target="_blank" class="layui-table-link"></a>-->
<!--</script>-->

<div class="tubiaofengeceng">各年龄阶段检测数据</div>
<div class="nianling">
    <div class="nianling_one">0-13岁参与检测人数：<label class="Num" id="ren1"></label>人</div>
    <div class="layui-progress layui-progress-big kuandu" lay-filter="pro_1" lay-showPercent="true">
        <div class="layui-progress-bar" lay-percent="0%"></div>
    </div>
    <div class="jianju_two nianling_one">14-18岁参与检测人数：<label class="Num" id="ren2"></label>人</div>
    <div class="layui-progress layui-progress-big kuandu" lay-filter="pro_2" lay-showPercent="true">
        <div class="layui-progress-bar layui-bg-orange" lay-percent="0%"></div>
    </div>
    <div class="jianju_two nianling_one">19-28岁参与检测人数：<label class="Num" id="ren3"></label>人</div>
    <div class="layui-progress layui-progress-big kuandu" lay-filter="pro_3" lay-showPercent="true">
        <div class="layui-progress-bar layui-bg-blue" lay-percent="0%"></div>
    </div>
    <div class="jianju_two nianling_one">29-45岁参与检测人数：<label class="Num" id="ren4"></label>人</div>
    <div class="layui-progress layui-progress-big kuandu" lay-filter="pro_4" lay-showPercent="true">
        <div class="layui-progress-bar layui-bg-red" lay-percent="0%"></div>
    </div>
    <div class="jianju_two nianling_one">46-65岁参与检测人数：<label class="Num" id="ren5"></label>人</div>
    <div class="layui-progress layui-progress-big kuandu" lay-filter="pro_5" lay-showPercent="true">
        <div class="layui-progress-bar layui-bg-cyan" lay-percent="0%"></div>
    </div>
    <div class="jianju_two nianling_one">65岁以上参与检测人数：<label class="Num" id="ren6"></label>人</div>
    <div class="layui-progress layui-progress-big kuandu" lay-filter="pro_6" lay-showPercent="true">
        <div class="layui-progress-bar layui-bg-black" lay-percent="0%"></div>
    </div>
</div>

<script>
    //注意进度条依赖 element 模块，否则无法进行正常渲染和功能性操作
    layui.use('element', function () {
        var element = layui.element;
        $.ajax({
            url: '/api/getInformationAge',
            type: 'get',
            datatype: 'json',
            success: function (data) {
                $('#ren1').html(data.fnum)
                $('#ren2').html(data.Snum)
                $('#ren3').html(data.Tnum)
                $('#ren4').html(data.Rnum)
                $('#ren5').html(data.Inum)
                $('#ren6').html(data.Xnum)
                element.progress('pro_1', data.fnumper);
                element.progress('pro_2', data.Snumper);
                element.progress('pro_3', data.Tnumper);
                element.progress('pro_4', data.Rnumper);
                element.progress('pro_5', data.Inumper);
                element.progress('pro_6', data.Xnumper);
            }
        })
    });
</script>
<div class="tubiaofengeceng">各机器更详细数据</div>
<div style="margin-top: 3%">
    <!--两块模版-->
    <form class="layui-form" action="" style="margin-left: 35%;width: 24.5% ">
        <div class="layui-form-item">
            <label class="layui-form-label">机器型号：</label>
            <div class="layui-input-block">
                <select name="roleId" lay-verify="required" id="machineModelId">
                    <option value="">请选择设备号</option>
                </select>
            </div>
        </div>
    </form>
    <script>
        var form,layedit,layer,laydate;
        layui.use(['form', 'layedit','layer','laydate'], function(){

            form = layui.form;
            layer = layui.layer;
            layedit = layui.layedit;
            laydate = layui.laydate;

            selectRoleName();    // 调用查询方法
            function selectRoleName(){
                $.ajax({
                    url:"/api/getEquipmentListSbno",
                    type:"GET",
                    dataType:"json",
                    success:function(result){
                        var list = result.data;    //返回的数据
                        var role = document.getElementById("machineModelId");        //add_role_name给select定义的id
                        for(var i=0;i<list.length;i++){
                            var option = document.createElement("option");    // 创建添加option属性
                            option.setAttribute("value",list[i].sbNo);                  // 给option的value添加值
                            option.innerText=list[i].sbNo;             // 打印option对应的纯文本 （超级管理员、管理员）
                            role.appendChild(option);                          // 给select 添加option子标签
                            form.render("select");                                // 刷性select，显示出数据
                        }
                    }
                });
            }
        })
    </script>
    <div style="margin-left: 39%;margin-top: 2%"> <!-- 注意：这一层元素并不是必须的 -->
        <label>年月： </label>
        <input type="text" class="layui-input" id="test1" value="" style="width: 28.5%;display: inline"
               placeholder="请选择">
    </div>
    <!--时间选择框的属性-->
    <script>
        layui.use('laydate', function () {
            var laydate = layui.laydate;
            //执行一个laydate实例
            laydate.render({
                elem: '#test1' //指定元素
                , type: 'month'
            });
        });
    </script>
    <div style="margin-left: 48%;margin-top: 1%">
        <button class="layui-btn layui-btn-radius layui-btn-warm" style="display: inline"
                onclick="queding(),biaoge(),nianling()">确定
        </button>
        <label style="color: red">（选好机器型号与年月即可点击确定）</label>
    </div>
    <script>
        function queding() {
            var machineModelId = $("#machineModelId").val();//机器型号的值，    判断完之后，才能把数据放到接口里面
            var timeDate = $("#test1").val();
            if (machineModelId != "" && timeDate != "") {
                $.ajax({
                    url: '/api/getEcharts',
                    data: {"sbno": machineModelId, "mounthDate": timeDate},
                    type: 'get',
                    datatype: 'json',
                    success: function (data) {
                        if(data.sumCount !== 0){
                            $("#Mjc").html(data.sumCount);
                            $("#Mfk").html(data.payCount);

                            myChart_one.setOption({
                                xAxis: {data: data.date},
                                series: [
                                    {name: '检测数', data: data.listSum},
                                    {name: '付款数', data: data.listPay}
                                ]
                            });
                        }else {
                            layer.msg("暂未数据！");
                        }
                    }
                })
            } else if (machineModelId == "") {
                alert("请选择机器型号");
            } else if (timeDate == "") {
                alert("请选择时间");
            }
        }
    </script>
    <div class="layui-container">
        <div class="layui-row">
            <div class="layui-col-md3 layui-col-md-offset3">
                <div class="allDb">
                    <div class="allDb_one">月累计检测数</div>
                    <div class="allDb_two"><label id="Mjc"></label></div>
                </div>
            </div>
            <div class="layui-col-md4 layui-col-md-offset1">
                <div class="allDb">
                    <div class="allDb_one">月累计付款数</div>
                    <div class="allDb_two"><label id="Mfk"></label></div>
                </div>
            </div>
        </div>
    </div>

    <!--统计图-->
    <div id="demoTwo" class="tjt"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart_one = echarts.init(document.getElementById('demoTwo'));

        // 指定图表的配置项和数据
        var option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            legend: {
                data: ['检测数', '付款数']
            },
            grid: {
                left: '10%',
                right: '10%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    data: []
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '检测数',
                    type: 'bar',
                    barWidth: '30',
                    color: '#1E90FF',
                    data: []
                },
                {
                    name: '付款数',
                    type: 'bar',
                    barWidth: '30',
//                color:'#90EE90',
                    data: []
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart_one.setOption(option);
    </script>
    <!--table-->
    <div style="margin-top: 5%;margin-left: 22%">
        <table id="demo1" lay-filter="test"></table>
    </div>
    <script>
        function biaoge() {
            var machineModelId = $("#machineModelId").val();//机器型号的值，    判断完之后，才能把数据放到接口里面
            var timeDate = $("#test1").val();
            if(machineModelId != "" && timeDate != ""){

                layui.use('table', function () {
                    var table = layui.table;
                    // 打印对应的设备编号
                    // console.log(param);
                    //第一个实例
                    table.render({
                        elem: '#demo1'
                        , height: 500
                        , width: 918
                        , url: '/api/getUserInformationList' //数据接口
                        , where: {sbno: machineModelId, mounthDate: timeDate}
                        , page: true //开启分页
                        , limits: '[10,20,30,40]'
                        , loading: 'true'
                        , cols: [[ //表头
                            {field: 'phone', title: '手机号码', width: 150, fixed: 'left'}
                            , {field: 'age', title: '年龄', width: 70}
                            , {field: 'gender', title: '性别', width: 70, templet: '#titleTpl2'}
                            , {
                                field: 'addtime', title: '检测时间', width: 170, templet: function (d) {
                                    var times = RiQi(d.addtime.time / 1000);
                                    return times;
                                }
                            }
                            , {field: 'status', title: '是否付款', width: 100, templet: '#titleTpl4'}
                            , {field: 'paytype', title: '付款方式', width: 100, templet: '#titleTpl3'}
                            , {field: 'pdfurl', title: '查看报告', width: 250,templet: '#titleTpl9'}
                        ]]
                    });
                });
            }


            function RiQi(sj) {
                var now = new Date(sj * 1000);
                var year = now.getFullYear();
                var month = now.getMonth() + 1;
                var date = now.getDate();
                var hour = now.getHours();
                var minute = now.getMinutes();
                var second = now.getSeconds();
                if (month < 10) {
                    month = '0' + month;
                }
                if (date < 10) {
                    date = '0' + date;
                }
                if (hour < 10) {
                    hour = '0' + hour;
                }
                if (minute < 10) {
                    minute = '0' + minute;
                }
                if (second < 10) {
                    second = '0' + second;
                }
                return year + "-" + month + "-" + date + " " + hour + ":" + minute + ":" + second;
            }

        }
    </script>
    <script type="text/html" id="titleTpl9">
        <a href="{{d.pdfurl}}" target="_blank" class="layui-table-link">查看报告</a>
    </script>
    <script type="text/html" id="titleTpl2">
        {{# if(d.gender=='0'){ }}
        男
        {{# } else{ }}
        女
        {{# } }}
    </script>
    <script type="text/html" id="titleTpl4">
        {{# if(d.status=='0'){ }}
        未支付
        {{# } else if(d.status=='1'){ }}
        支付成功
        {{# }else{}}
        支付失败
        {{# } }}
    </script>
    <script type="text/html" id="titleTpl3">
        {{# if(d.paytype=='0'){ }}
        未支付
        {{# } else if(d.paytype=='1'){ }}
        现金支付
        {{# }else{}}
        票券支付
        {{# } }}
    </script>
    <div class="nianling">
        <div class="nianling_one">0-13岁参与检测人数：<label class="Num" id="lab1"></label>人</div>
        <div class="layui-progress layui-progress-big kuandu" lay-filter="po_1" lay-showPercent="true">
            <div class="layui-progress-bar" lay-percent="0%"></div>
        </div>
        <div class="jianju_two nianling_one">14-18岁参与检测人数：<label class="Num" id="lab2"></label>人</div>
        <div class="layui-progress layui-progress-big kuandu" lay-filter="po_2" lay-showPercent="true">
            <div class="layui-progress-bar layui-bg-orange" lay-percent="0%"></div>
        </div>
        <div class="jianju_two nianling_one">19-28岁参与检测人数：<label class="Num" id="lab3"></label>人</div>
        <div class="layui-progress layui-progress-big kuandu" lay-filter="po_3" lay-showPercent="true">
            <div class="layui-progress-bar layui-bg-blue" lay-percent="0%"></div>
        </div>
        <div class="jianju_two nianling_one">29-45岁参与检测人数：<label class="Num" id="lab4"></label>人</div>
        <div class="layui-progress layui-progress-big kuandu" lay-filter="po_4" lay-showPercent="true">
            <div class="layui-progress-bar layui-bg-red" lay-percent="0%"></div>
        </div>
        <div class="jianju_two nianling_one">46-65岁参与检测人数：<label class="Num" id="lab5"></label>人</div>
        <div class="layui-progress layui-progress-big kuandu" lay-filter="po_5" lay-showPercent="true">
            <div class="layui-progress-bar layui-bg-cyan" lay-percent="0%"></div>
        </div>
        <div class="jianju_two nianling_one">65岁以上参与检测人数：<label class="Num" id="lab6"></label>人</div>
        <div class="layui-progress layui-progress-big kuandu" lay-filter="po_6" lay-showPercent="true">
            <div class="layui-progress-bar layui-bg-black" lay-percent="0%"></div>
        </div>
    </div>

    <script>
        //注意进度条依赖 element 模块，否则无法进行正常渲染和功能性操作


        function nianling(){
            var machineModelId = $("#machineModelId").val();//机器型号的值，    判断完之后，才能把数据放到接口里面
            var timeDate = $("#test1").val();
            if(timeDate.length>0){
                layui.use('element', function () {
                    var element = layui.element;
                    $.ajax({
                        url: '/api/getInformationAge',
                        data:{sbno:machineModelId,mounthDate: timeDate},
                        type: 'get',
                        datatype: 'json',
                        success: function (data) {
                            $('#lab1').html(data.fnum)
                            $('#lab2').html(data.Snum)
                            $('#lab3').html(data.Tnum)
                            $('#lab4').html(data.Rnum)
                            $('#lab5').html(data.Inum)
                            $('#lab6').html(data.Xnum)
                            element.progress('po_1', data.fnumper);
                            element.progress('po_2', data.Snumper);
                            element.progress('po_3', data.Tnumper);
                            element.progress('po_4', data.Rnumper);
                            element.progress('po_5', data.Inumper);
                            element.progress('po_6', data.Xnumper);
                        }
                    })
                });
            }

        }

    </script>
</div>
</body>
</html>